<template>
  <div style="margin-bottom:50px;">
    <!-- 头部 -->
    <mt-header title="会员中心">
      <div slot="left">
        <mt-button @click="goBack" icon="back">返回</mt-button>
      </div>
    </mt-header>
    <!-- 会员头像 -->
    <div class="vip_header">
      <div class="customer clear">
        <div class="avater">
          <img :src="require('../assets/img/user.png')"/>
        </div>
        <div class="info">
          <p><span class="s1"> hj41648489</span> <span class="s2">普通会员</span></p>
          
          <p>
          <span class="s3">积分：</span>
          <span class="s4">30</span>&nbsp;&nbsp;
          <span class="s3">红包：</span>
          <span class="s4">0</span>
          </p>
        </div>
      </div>
      <ul class="clear">
        <li>
          <router-link to="/payment">
            <p>1</p>
            <p>待付款</p>
          </router-link>
        </li>
        <li>
          <router-link to="/receive">
            <p>0</p>
            <p>待收货</p>
          </router-link>
        </li>
        <li>
          <router-link to="/appraise">
            <p>0</p>
            <p>待评价</p>
          </router-link>
        </li>
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {fanhui} from '../assets/js/base.js'
  export default{
    data:function(){
      return {
        msg:'this is center'
      }
    },
    methods:{
     goBack(){
      fanhui();
     }
    }
  }
</script>

<style scoped>
.vip_header{
  height: 150px;
  width: 100%;
  background: url('../assets/img/vip_bg1.jpg') no-repeat;
  background-size:100%;
}
.customer{
  width: 85%;
  margin: 0 auto;
}
.avater,.info{
  float: left;
  margin-top: 20px;
}
.avater{
  width: 25%;
}
.avater img{
  width:65px;
  height: 65px;
  border-radius: 50%;
}
.info{
  width: 50%;
  
}
.info .s1{
  font-size: 16px;
  color: #fff;
}
.info .s2{
  color: #fff;
  display: inline-block;
  margin-left: 7px;
  width: 62px;
  background-color: #CDDC39;
  border-radius: 5px;
}
.info .s3{
  color: #fff;
}
.info .s4{
  color: #ffc601;
}
.vip_header ul{
 height: 45px;
 margin-top: 14px;
}
.vip_header ul li{
  width: 33%;
  float: left;
  height: 45px;
  background: rgba(60, 60, 60, .3);
  padding:3px 0;
  margin-right: .33%;
}
.vip_header ul li p{
  text-align: center;
  color: #fff;
  line-height: 20px;
  margin-bottom: 0px;
}
</style>




